<template>
	<view class="Reconciliation">
		<view class="search">
			<input v-model="user" type="text" placeholder="请输入客户" />
			<view @tap="search" class=""> 搜索 </view>
			<view @tap="reset" class=""> 重置 </view>
		</view>
		<view class="article">
			<view class="table">
				<view class="table_header">
					<view> 客户 </view>
					<view> 总货款 </view>
					<view> 已收款 </view>
					<view> 应收款 </view>
					<view> 操作 </view>
				</view>
				<view v-if="list.length">
					<view class="table_body" v-for="(item, index) in list" :key="index">
						<view> {{ item.cname }}</view>
						<view style="color: #fe3430"> {{ item.orderAmt?item.orderAmt:'0' }} </view>
						<view style="color: #fe3430"> {{ item.realAmt?item.realAmt:'0' }}</view>
						<view style="color: #fe3430"> {{ item.payAmt?item.payAmt:"0" }} </view>
						<view class="detail">
							<view @tap="skip(`/pages/financial/cusPayDetail?cid=${item.cid}`)">
								详情
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<u-divider textSize="34" text="暂无数据"></u-divider>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: "",
				list: [],
			};
		},
		methods: {
			reset() {
				this.user = "";
				this.getList({
					pageNo: 1,
					pageSize: 10
				});
			},
			search() {
				if (this.user) {
					this.getList({
						pageNo: 1,
						pageSize: 10,
						keyword: this.user
					});
				} else {
					this.getList({
						pageNo: 1,
						pageSize: 10
					});
				}
			},
			getList(query) {
				this.$api.flowOrderPurchasePayReportApi({
					data: query
				}).then((res) => {
					if (res.code == 200) {
						this.list = res.result.list;
					}
				});
			},
		},
		onShow() {
			this.getList({
				pageNo: 1,
				pageSize: 10
			});
		},
	};
</script>

<style lang="scss" scoped>
	.table {
		background: #fff;
		min-height: 300rpx;
		border-radius: 20rpx;

		.table_header,
		.table_body {
			margin-top: 20rpx;
			display: grid;
			text-align: center;
			grid-template-columns: repeat(5, 1fr);
		}

		.table_header {
			font-size: 30rpx;
			border-bottom: 1px solid #bdbdbd;

			view {
				height: 80rpx;
				line-height: 80rpx;
			}
		}

		.table_body {
			view {
				height: 60rpx;
				line-height: 60rpx;
				// border-left: 1px solid #eee;
				// border-bottom: 1px solid #eee;
				// border-right: 1px solid #eee;
			}

			.detail {
				view {
					width: 124rpx;
					height: 49rpx;
					background: #fe3430;
					border-radius: 24rpx;
					text-align: center;
					line-height: 49rpx;
					color: #fff;
					margin: 5rpx auto;
				}
			}
		}
	}

	page {
		background-color: #f1f1f1;
	}

	.Reconciliation {
		background: #f1f1f1;
		height: 100vh;

		.search {
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 29rpx 37rpx;

			input {
				height: 94rpx;
				background: #f2f2f2;
				border-radius: 47rpx;
				text-indent: 1em;
			}

			view {
				width: 145rpx;
				height: 75rpx;
				line-height: 75rpx;
				background: #fe3430;
				border-radius: 38px;
				text-align: center;
				color: #fff;
				margin-left: 23rpx;
			}
		}

		.article {
			padding: 32rpx 17rpx;

			.article_table {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 12rpx 12rpx 30rpx 12rpx;
				box-sizing: border-box;
				color: #272727;

				.title {
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-bottom: 1px solid #f1f1f1;
				}

				.table_body {
					display: flex;
					justify-content: space-around;
					text-align: center;
					margin-top: 20rpx;

					.num {
						color: #fe3430;
					}

					.btn1 {
						display: flex;
						justify-content: space-around;
						align-items: center;

						view {
							background: #fe3430;
							width: 124rpx;
							height: 48rpx;
							line-height: 30rpx;
							border-radius: 24rpx;
							padding: 13rpx 0;
							font-size: 24rpx;
							color: #fff;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
